<script setup>
    import { inject } from 'vue';
    const emitter = inject('emitter');
    const props = defineProps(['id']);
    
    const play = () => {
        emitter.emit('play', props.id);
    }
</script>

<template>
    <div @click="play"><img src="../../assets/img/play-circle.png" alt=""></div>
</template>

<style lang='less' scoped>
   div{
        padding: 2px!important;
        width: 20px!important;
        height: 20px!important;
        cursor: pointer;
        position: relative;
        &:hover{
            background-color: rgb(83, 82, 82);
            border-radius: 60%;
        }
        img{
            display: block;
            width: 85%;
            height: 85%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
</style>